<template>
    <div id="putRecord">
        <el-popover placement="bottom-start" width="1018" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" label-width="90px" :model="searchList" class="demo-ruleForm">
                <el-form-item label="卡号" style="margin-bottom: 5px;"><el-input v-model="searchList.cardId"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="姓名" style="margin-bottom: 5px;"><el-input v-model="searchList.providerName"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="电话" style="margin-bottom: 5px;"><el-input v-model="searchList.phone"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="性别" style="margin-bottom: 5px;"><el-select v-model="searchList.sex"  style="width: 100px;"><el-option value="" label="【空】"></el-option><el-option :value="1" label="男"></el-option><el-option :value="2" label="女"></el-option></el-select></el-form-item>
                <el-form-item label="血型" style="margin-bottom: 5px;"><el-select v-model="searchList.bloodType"  style="width: 100px;"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData12" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="介绍人" style="margin-bottom: 0;"><el-input v-model="searchList.jsr"  style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="浆员状态" style="margin-bottom: 0;"><el-select v-model="searchList.providerState"  style="width: 100px;"><el-option value="" label="【空】"></el-option><el-option v-for="item in codeData14" :key="item.code" :value="item.code" :label="item.name"></el-option></el-select></el-form-item>
                <el-form-item label="创建时间" style="margin: 5px 10px 5px 0;"><el-date-picker v-model="searchList.time"  type="daterange" style="width: 305px;" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
            </el-form>
            <el-form :inline="true" label-width="90px" :model="searchList" class="demo-ruleForm">
                <el-form-item label="身份证"><el-input v-model="searchList.idNo"  style="width: 170px;"></el-input></el-form-item>
                <el-form-item label="身份证地址"><el-input v-model="searchList.idNoAddress"  style="width: 170px;"></el-input></el-form-item>
                <el-form-item label="地址" style="margin-left: -5px;"><el-input v-model="searchList.address"  style="width: 170px;"></el-input></el-form-item>
                <el-button type="primary" @click="submitSearchData" style="margin: 0 0 0 50px;padding: 7px 15px;">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>

        <!-- 表格 -->
        <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;" @row-click="getRowData" :header-cell-style="getRowClass">
            <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
            <el-table-column prop="icon" label="头像" sortable min-width="75"><template slot-scope="scope"><img :src="'data:image/jpg;base64,' + scope.row.photo" style="width: 25px;height:30px"></template></el-table-column>
            <el-table-column prop="cardId" label="卡号" sortable min-width="80"></el-table-column>
            <el-table-column prop="name" label="姓名" sortable min-width="80"></el-table-column>
            <el-table-column prop="sex" label="性别" :formatter="formatSex" sortable min-width="75"></el-table-column>
            <el-table-column prop="age" label="年龄" sortable min-width="75"></el-table-column>
            <el-table-column prop="idNo" label="身份证号" sortable min-width="180"></el-table-column>
            <el-table-column prop="createDate" label="创建日期" sortable min-width="170"></el-table-column>
            <el-table-column prop="createNurseName" label="创建护士" sortable min-width="110"></el-table-column>
            <el-table-column prop="phone" label="电话" sortable min-width="120"></el-table-column>
            <el-table-column prop="idNoAddress" label="地址" sortable min-width="350"></el-table-column>
            <el-table-column prop="introducer" label="介绍人" sortable min-width="100"></el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchList.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="searchList.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalData"></el-pagination>


    </div>
</template>

<script>
    export default {
        name: "searchPulpWorker",
        data(){
            return {
                tokenId: sessionStorage.getItem("tokenId"),
                tableHeight: document.documentElement.clientHeight - 250,
                tableData:[],
                searchList:{
                    currentPage:1,
                    pageSize:10,
                    cardId:null,
                    providerName:null,
                    idNo:null,
                    sex:null,
                    idNoAddress:null,
                    address:null,
                    phone:null,
                    bloodType:null,
                    createStartTime:null,
                    createEndTime:null,
                    providerState:null,
                    jsr:null,
                    time:'',
                },
                pulpWorker:{}
            }
        },
        created() {
            this.searchList.currentPage= 1;
            this.searchList.pageSize= 10;
            this.getData(this.searchList);
            this.getCodeData(12);
            this.getCodeData(14);
        },
        methods:{
            getData(data) {
                let list = {
                    currentPage:data.currentPage,
                    pageSize:data.pageSize,
                    cardId:data.cardId,
                    providerName:data.providerName,
                    idNo:data.idNo,
                    sex:data.sex,
                    idNoAddress:data.idNoAddress,
                    address:data.address,
                    phone:data.phone,
                    bloodType:data.bloodType,
                    createStartTime:data.createStartTime,
                    createEndTime:data.createEndTime,
                    providerState:data.providerState,
                    jsr:data.jsr,
                };
                console.log( list )
                let _this = this;
                let loading = this.$loading({
                    target: document.querySelector(".wrapper > .content-box"),
                    lock: true,
                    text: '正在努力加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.8)'
                });
                this.$http({
                    url: '/api/adscm/application/providerInfo/selectProviderInfo?tokenId='+_this.tokenId,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    data:list
                }).then(function (res) {
                    console.log( res.data.content.records )
                    if (res.data.statusCode == 200) {
                        _this.totalData = res.data.content.total;
                        _this.tableData = res.data.content.records;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                    loading.close();
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                    loading.close();
                })
            },
            submitSearchData(){
                this.searchList.createStartTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.createEndTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            },
            getRowData(row, column, event){
                this.$emit('getRowData', row)
            },
            handleSizeChange: function (size) {
                this.searchList.pageSize = size;
                this.searchList.createStartTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.createEndTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            },
            handleCurrentChange: function (currentPage) {
                this.searchList.currentPage = currentPage;
                this.searchList.createStartTime= this.searchList.time ? this.timestampToTime(this.searchList.time[0]).substr(0,10) : "";
                this.searchList.createEndTime= this.searchList.time ? this.timestampToTime(this.searchList.time[1]).substr(0,10) : "";
                this.getData(this.searchList);
            },
            timestampToTime (timestamp) {
                if (timestamp) {
                    let date = new Date(timestamp);
                    let Y = date.getFullYear() + '-';
                    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + " ";
                    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ":";
                    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ":";
                    let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                    return timestamp ? Y + M + D + h + m + s : '';
                } else {
                    return '';
                }
            },
        }
    }
</script>

<style scoped>



</style>

